<template>
  <div class="manage-container">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="价格策略名称:" prop="strategyName">
        <el-input
          v-model.trim="form.strategyName"
          placeholder="请输入价格策略名称"
          autocomplete="off"
        ></el-input>
      </el-form-item>

      <el-form-item prop="priceStrategyItemName">
        <el-button
          type="primary"
          class="button-new-tag"
          size="big"
          style=" margin-top: 5px;margin-bottom: 5px;"
          icon="el-icon-plus"
          @click="showStrategyItem"
        >
          增加明细
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-row v-for="(item, index) in form.items" :key="index">
          <el-col style="margin-bottom: 15px; color: black">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete-solid"
              style="margin-right: 20px"
              @click="deletePriceItem(index)"
            >
              删除
            </el-button>

            <el-tag style="color: black;" type="info">
              {{ item.categoryName }}
            </el-tag>
            <el-tag style="color: black; " type="info">
              {{ item.productName }}
            </el-tag>
            <el-tag
              v-if="item.specName.trim()"
              style="color: black; "
              type="info"
            >
              {{ item.specName }}
            </el-tag>
            <el-tag
              v-if="item.fbaseUnitIdfname"
              style="color: black;"
              type="info"
            >
              {{ item.fbaseUnitIdfname }}
            </el-tag>
            <el-tag style="color: black;"  type="info">
              {{ item.price }}元
            </el-tag>
            <el-tag style="color: black;"  type="info">
              {{ item.moqTimes }}倍
            </el-tag>
            <el-tag style="color: black;"  type="info">
              {{ item.moq }}起订
            </el-tag>
            <el-tag :type="item.stopSell? 'primary': 'success'">
              {{ item.stopSell? '暂停': '开启' }}
            </el-tag>
            <el-badge v-if="item.liaobao" :value="item.specNum" class="item">
              <el-tag type="default" disable-transitions style="margin-right: 8px;">
                料包
              </el-tag>
            </el-badge>
            <el-tag v-if="item.zhacai" type="warning" disable-transitions>
                榨菜
            </el-tag>
            <el-tag v-if="item.lajiaoyou" type="danger" disable-transitions>
                辣椒油
            </el-tag>
            <el-tag v-if="item.xiangcong" type="success" disable-transitions>
                香葱
            </el-tag>
            <el-tag v-if="item.xiaohuntun" type="info" disable-transitions>
                小馄饨料粉
            </el-tag>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-edit"
              style="margin-left: 30px"
              @click="onEditPriceItem(index)"
            >
              编辑
            </el-button>
            <el-tag v-if="item.specCode!='' && item.specCode!=null " style="margin-left:5px;color: black; font-size: 10px" type="warning">
              {{ item.specCode }}
            </el-tag>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="默认策略:" prop="isDefault">
        <el-checkbox v-model="form.isDefault"></el-checkbox>
      </el-form-item>

      <el-form-item label="是否禁用:" prop="isLocked">
        <el-checkbox v-model="form.isLocked"></el-checkbox>
      </el-form-item>

      <el-form-item label="备注信息:" prop="description">
        <el-input
          v-model="form.remark"
          type="textarea"
          rows="3"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="warning"
          class="button-new-tag"
          style="color: black"
          size="big"
          @click="onSubmit"
        >
          确定
        </el-button>
      </el-form-item>
    </el-form>
    <strategy-item
      ref="strategyItem"
      :categories="categories"
      @add-item="addPriceItem"
      @edit-item="editPriceItem"
    ></strategy-item>
  </div>
</template>

<script>
  import { getCategoryList } from '@/api/erp'
  import {
    doAdd,
    doEdit,
    doGetStrategyDetail,
  } from '@/api/priceStrategyManagement'
  import StrategyItem from './components/strategyItem'
  export default {
    name: 'PriceStrategyManagement',
    components: { StrategyItem },
    data() {
      return {
        keyword:null,
        form: {
          strategyId: '',
          strategyName: '',
          remark: '',
          isDefault: false,
          isLocked: false,
          items: null,
        },
        rules: {
          strategyName: [
            {
              required: true,
              trigger: 'blur',
              message: '请输入价格策略名称',
            },
          ],
        },
        categories: [],
        regulars: [],
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      async fetchData() {
        this.form.items = []
        this.categories = await getCategoryList()
        const { strategyInfo } = this.$route.params
        if (strategyInfo) {
          this.form.strategyId = strategyInfo.id
          this.form.strategyName = strategyInfo.strategyName
          this.form.remark = strategyInfo.remark
          this.form.isDefault = strategyInfo.isDefault
          this.form.isLocked = strategyInfo.isLocked

          let res = await doGetStrategyDetail(strategyInfo.id || 0)

          //获取价格策略的内容
          this.form.items = res.items
        }
      },
      onSubmit() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.strategyId) {
              await doEdit(this.form)
            } else {
              await doAdd(this.form)
              this.form.strategyName = ''
              this.form.remark = ''
              this.form.isLocked = false
              this.form.isDefault = false
              this.form.items = []
            }
            this.$baseMessage('价格策略保存成功', 'success')
            this.$emit('fetch-data')
          } else {
            return false
          }
        })
      },
      onSearch(){
         
      },
      showStrategyItem() {
        this.$refs['strategyItem'].showDialog()
      },
      addPriceItem(data) {
        if (!this.form.items) {
          this.form.items = []
        }
        var item = {
          categoryCode: data.category.fid,
          categoryName: data.category.fname,
          productCode: data.product.fnumber,
          productName: data.product.fname,
          specCode: data.specCode,
          specNum: data.specNum,
          specName: data.product.fspecification,
          fbaseUnitIdfname: data.product.fbaseUnitIdfname,
          price: data.price,
          liaobao: data.liaobao,
          zhacai: data.zhacai,
          lajiaoyou: data.lajiaoyou,
          xiangcong: data.xiangcong,
          xiaohuntun: data.xiaohuntun,
          moqTimes: data.moqTimes,
          moq: data.moq,
          stopSell: data.stopSell
        }

        console.info(item)
        let index = this.$baseLodash.findIndex(this.form.items, {categoryCode : item.categoryCode, productCode : item.productCode})
        if (index < 0) {
          this.form.items.push(item)
        }else{
          this.$set(this.form.items,index,item)
        }
      },
      editPriceItem(data, index) {
        var item = {
          categoryCode: data.category.fid,
          categoryName: data.category.fname,
          productCode: data.product.fnumber,
          productName: data.product.fname,
          specCode: data.specCode,
          specNum: data.specNum,
          specName: data.product.fspecification,
          fbaseUnitIdfname: data.product.fbaseUnitIdfname,
          price: data.price,
          liaobao: data.liaobao,
          zhacai: data.zhacai,
          lajiaoyou: data.lajiaoyou,
          xiangcong: data.xiangcong,
          xiaohuntun: data.xiaohuntun,
          moqTimes: data.moqTimes,
          moq: data.moq,
          stopSell: data.stopSell
        }
        this.$set(this.form.items, index, item)
      },
      deletePriceItem(index) {
        this.form.items.splice(index, 1)
        this.$baseMessage('价格策略删除成功', 'success')
      },
      onEditPriceItem(index) {
        let item = this.form.items[index]
        this.$refs['strategyItem'].showDialog(item, index)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .categories-container {
    display: flex;
  }
  .item {
  margin-left:20px;
}
</style>
